<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dom-节点操作</title>
    <style>
      table,
      td {
        border: 1px solid #ccc;
        border-collapse: collapse;
        text-align: center;
        width: 800px;
        height: 30px;
      }

      div {
        border: 1px solid #ccc;
        border-radius: 20px;
        text-align: center;
        width: 100px;
        height: 20px;
      }

      div:hover {
        background-color: #a5a5a5;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td>111</td>
          <td>111</td>
          <td>111</td>
          <td><a href="#">删除</a></td>
        </tr>
        <tr>
          <td>222</td>
          <td>222</td>
          <td>222</td>
          <td><a href="#">删除</a></td>
        </tr>
        <tr>
          <td>333</td>
          <td>333</td>
          <td>333</td>
          <td><a href="#">删除</a></td>
        </tr>
      </tbody>
    </table>
    <br />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <div>+</div>

    <script>
      document.querySelector('table').onclick = function () {
        if (event.target.localName == 'a') {
          confirm('确定要删除吗?') ? (event.target.parentNode.parentNode.style.display = 'none') : ''
        }
      }

      document.querySelector('div').onclick = function () {
        /* let newLine = `<tr><td>${prompt('请您输入第一个td的数据:')}</td>
        <td>${prompt('请您输入第二个td的数据:')}</td>
        <td>${prompt('请您输入第三个td的数据:')}</td>
        <td><a href="#">删除</a></td></tr>` */

        const inputs = document.querySelectorAll('input')
        let newLine = `<tr><td>${inputs[0].value}</td>
        <td>${inputs[1].value}</td>
        <td>${inputs[2].value}</td>
        <td><a href="#">删除</a></td></tr>`

        let newData = document.querySelector('tbody').innerHTML + newLine
        document.querySelector('tbody').innerHTML = newData
      }
    </script>
  </body>
</html>
